<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container" id="app">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                说明
            </h3>
        </div>
        <div class="panel-body">
            这是一个静态HTML页面,通过jQuery从后端获取数据,通过Vue实现数据绑定（MVVM模式）,后端的RestAPI由WeatherController提供.<br/>
        </div>
    </div>
    <div class="form-group">
        <label>{{ title }}</label>
        <select id="citySelect" class="form-control" @change="chooseCity">
            <template v-if="report.cityList.length>0" v-for="city in report.cityList">
                <option :value="city.code" v-if="city.code == report.cityCode"
                        selected>{{city.name}}
                </option>
                <option :value="city.code" v-else>
                    {{city.name}}
                </option>
            </template>
        </select>
    </div>
    <template v-if="report.weather">
        <ul class="list-group">
            <li class="list-group-item">城市: {{report.weather.city}}</li>
            <li class="list-group-item">空气: {{report.weather.aqi? report.weather.aqi: '-'}}</li>
            <li class="list-group-item">温度: {{report.weather.wendu}}</li>
            <li class="list-group-item">备注: {{report.weather.ganmao}}</li>
        </ul>
        <table class="table">
            <caption>天气</caption>
            <thead>
            <tr>
                <th>日期</th>
                <th>天气</th>
                <th>最高温度</th>
                <th>最低温度</th>
                <th>风向</th>
                <th>风力</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>{{report.weather.yesterday.date}}</td>
                <td>{{report.weather.yesterday.type}}</td>
                <td>{{report.weather.yesterday.high}}</td>
                <td>{{report.weather.yesterday.low}}</td>
                <td>{{report.weather.yesterday.fx}}</td>
                <td>{{report.weather.yesterday.fl}}</td>
            </tr>
            <tr v-for="fore in report.weather.forecast">
                <td>{{fore.date}}</td>
                <td>{{fore.type}}</td>
                <td>{{fore.high}}</td>
                <td>{{fore.low}}</td>
                <td>{{fore.fengxiang}}</td>
                <td>{{fore.fengli}}</td>
            </tr>
            </tbody>
        </table>
    </template>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="js/app.js"></script>
<script type="text/javascript">
    $(function () {
        app.init();
    });
</script>
</body>
</html>